import React, {
	Component
} from 'react';
import {
	observer,
	inject,
} from 'mobx-react';
import {
	Flex,
	Tools,
	WhiteSpace
} from 'weaver-mobile';
import Top from './Top.js';
import Chart from './Chart.js';
import Absence from './Absence.js';
import Abnormal from './Abnormal.js';
import Leave from './Leave.js';
import '../../../style/myAttendance.less';
const getLabel = Tools.getLabel;

@inject('myAttendanceStore')
@observer
export default class MyAttendance extends Component {
	componentDidMount() {
	    const { myAttendanceStore: { init } } = this.props;
	   	this.handlePath();
		this.setHrmId();
	    init();
	}
	
	//设置下属人员id
	setHrmId  =() => {
		if (this.isSub()) {
			const {myAttendanceStore:{setHrmId},match: { params }} = this.props;
			const {id} = params;
			const getId = () => {
				const ls = window.localStorage;
				const subpath =  ls.getItem('subPath');
				return subpath.split('/').pop()
			}
			const hrmId = (/\D/.test(id)) ? getId() : id;
			setHrmId(hrmId)
		}
	}
	
	//是否是下属考勤
	isSub = () => {
		const {match: { params }} = this.props;
		return params.id
	}

	
	handlePath = () => {
		const {match: { params,url },history} = this.props;

		//下属考勤
		if (this.isSub()) {
			const {id} = params
			const ls = window.localStorage;
			//不是人员id
			if (/\D/.test(id)) {
				const subpath =  ls.getItem('subPath');
				history.replace(subpath)
			}else{
				ls.setItem('subPath',url)
			}
			
		}
	}

	componentWillUnmount() {
		const ls = window.localStorage;
		ls.subPath && ls.removeItem('subPath')
	}

	render() {
		const {
			myAttendanceStore:store,
			history,
		} = this.props, {
			isInit,
		} = store;

		if (!isInit) {
			return null;
		}

		return (
			<div className="hrm-attendance">
				<Top store={store} history={history} />
				<div className="attendance-brief">
					<Chart store={store} history={history} />
					<Absence store={store} />
				</div>
				<WhiteSpace size="lg" />
				<div className="attendance-outside">
					<Abnormal store={store} history={history}/>
					<Leave store={store} history={history}/>
				</div>
			</div>
			
		);
	}
}